<template>
    <el-menu router unique-opened :default-active="$route.meta.title" background-color="#000" text-color="#fff" active-text-color="rgba(37, 135, 245, 1)">
        <template v-for="(item,index) in menuList">
            <!-- 一级菜单，没有子级 -->
            <el-menu-item :key="index" :route="{path: item.path}" v-if="!item.children" :index="item.title+''">
                <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
            </el-menu-item>
            <!-- 一级菜单，有子级 -->
            <el-submenu v-else :key="index" :index="item.title+''">
                <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
                <template v-for="(i,inx) in item.children">
                    <!-- 二级菜单，没有子级 -->
                    <el-menu-item :route="{path: i.path}" :key="inx" v-if="!i.children" :index="i.title+''">{{i.title}}</el-menu-item>
                    <!-- 二级菜单，有子级 -->
                    <el-submenu v-else :key="inx" :index="i.title+''">
                        <template slot="title">{{i.title}}</template>
                        <el-menu-item v-for="(a,b) in i.children" :key="b" :route="{path: a.path}" :index="a.title+''">{{a.title}}</el-menu-item>
                    </el-submenu>
                </template>
            </el-submenu>
        </template>
    </el-menu>
</template>

<script>
export default {
  name: 'navMenu',
  props: [
    "menuList"
  ]
}
</script>

<style lang="scss" scoped>
  .el-menu{
      border-right: none;
  }
</style>
